// 动态下钻排序柱状图
<template>
  <div class="threeBarChart" id="drilbar"></div>
</template>

<script>
export default {
  name: '',
  data() {
    return {}
  },
  computed: {
    reset() {
      return this.$store.getters.sidebar.opened
    }
  },
  props: {
    xline: Array, // x轴名称列表
    yline: Array, // y轴数据
    config: Object // 参数配置
  },

  methods: {
    // 重新绘制图表
    forceRerender() {

    },
    setChart() {
      this.myChart = this.$echarts.init(document.getElementById('drilbar'))
      this.myChart.clear();
      this.myChart.resize()
      this.myChart.setOption(this.option);
    }
  },
  data() {
    return {
      show: true,
      myChart: undefined,
      nowOption: null,
      option: {
        title: {
          text: "碳排放",
          textStyle: {
            color: "#fff",
            fontSize: 26
          },
          backgroundColor: 'rgba(0,32,96,1)',
          borderColor: "#000"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {type: "shadow"}
        },
        grid: {
          top: "25%",
          right: "70",
          bottom: "20",
          left: "50"
        },
        legend: {
          data: [{name: "一季度"}, {name: "二季度"}, {name: "三季度"}, {name: "四季度"}],
          top: "0%",
          textStyle: {
            color: "white" //图例文字
          }
        },
        xAxis: [
          {
            type: "category",
            data: ["2020", "2021", "2022"],
            axisLine: {lineStyle: {color: "#939495"}},
            axisLabel: {
              textStyle: {color: "#939495", fontSize: "14"}
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              fontSize: 14,
              color: "#939495"
            },
            axisLine: {
              min: 0,
              max: 10,
              lineStyle: {color: "#939495"}
            } //左线色
          },
          {
            type: "value",
            name: "",
            show: true,
            axisLabel: {
              show: true,
              fontSize: 14,
              formatter: "{value} ",
              color: "#939495"
            },
            axisLine: {lineStyle: {color: "#939495"}}, //右线色
            splitLine: {
              show: false,
              lineStyle: {color: "#939495"}
            } //x轴线
          }
        ],
        series: [
          {
            name: "一季度",
            type: "bar",
            data: [700, 700, 650],
            barWidth: "30",
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                // color: "#4F81BD"
              }
            },
            barGap: "0.2"
          },
          {
            name: "二季度",
            type: "bar",
            data: [950, 850, 800],
            barWidth: "30",
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                // color: "#C62B2D"
              }
            },
            barGap: "0.2"
          },
          {
            name: "三季度",
            type: "bar",
            data: [800, 750, 700],
            barWidth: "30",
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                // color: "#4F81BD"
              }
            },
            barGap: "0.2"
          },
          {
            name: "四季度",
            type: "bar",
            data: [750, 700, 650],
            barWidth: "30",
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                // color: "#C62B2D"
              }
            },
            barGap: "0.2"
          },
          {
            name: "总排放量",
            type: "line",
            yAxisIndex: 1,
            data: [3200, 3000, 2800],
            lineStyle: {
              normal: {
                width: 2
              }
            },
            itemStyle: {
              normal: {
                color: "#FCC519"
              }
            },
            smooth: true
          }
        ]
      }
    }
  },
  mounted() {
    this.setChart()
  },
  watch: {
    reset() {
      this.forceRerender()
    }
  }
}
</script>

<style lang="less" scoped>
.threeBarChart {
  height: 100%;
  width: 100%;
}
</style>
